<template>
  <div id="layout-container">
    <div id="mater-left">
      <MaterialArea />
    </div>
    <div id="mater-center">
      <MaterialContent :data="dataSource.data" @activeDargComponent="activeDargComponent"/>
    </div>
    <div id="mater-right">
      <MaterialEdit :activeComponent="activeComponent"/>
    </div>
  </div>
</template>
<script setup>
// 所有数据集合
const dataSource = reactive({
  title: '',
  data: []
})

// 选中态
const activeComponent = ref(null)
const activeDargComponent = (el) => {
  activeComponent.value = el
}
</script>
<style lang="scss" scoped>
#layout-container{
  width: 100%;
  height: 100%;
  display: flex;
  padding: 10px 5px;
  box-sizing: border-box;
  >div{
    border:1px solid #ccc;
    border-radius: 8px;
    box-shadow:
    0.4px 0.6px 0px rgba(0, 0, 0, 0.02),
    0.9px 1.2px 0px rgba(0, 0, 0, 0.032),
    1.5px 2.1px 0px rgba(0, 0, 0, 0.042),
    2.3px 3.1px 0px rgba(0, 0, 0, 0.05),
    3.3px 4.5px 0px rgba(0, 0, 0, 0.057),
    4.6px 6.4px 0px rgba(0, 0, 0, 0.063),
    6.5px 9px 0px rgba(0, 0, 0, 0.068),
    9.5px 13.1px 0px rgba(0, 0, 0, 0.071),
    14.6px 20.3px 0px rgba(0, 0, 0, 0.072),
    26px 36px 0px rgba(0, 0, 0, 0.07);
  }
  #mater-left{
    flex-basis: 320px;
  }
  #mater-right{
    flex-basis: 320px;
    padding: 10px 5px;
    box-sizing: border-box
  }
  #mater-center{
    flex: 1;
    margin: 0 24px;
    box-sizing: border-box;
  }
};
</style>
